<template>
  <div class="shop-detail-container">
    <div class="content">
      <div class="swiper-wrapper">
        <van-swipe class="my-swipe" indicator-color="#1baeae">
          <van-swipe-item v-for="(item, index) in detail.goodsCarouselList" :key="index">
            <img :src="item">
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="product-info">
        <div class="product-title">
          {{detail.goodsName || ''}}
        </div>
        <div class="product-desc">免邮费 顺丰快递</div>
        <div class="product-price">
          <span>¥{{detail.sellingPrice || ''}}</span>
        </div>
      </div>
      <div class="product-intro">
        <ul>
          <li>概述</li>
          <li>参数</li>
          <li>安装服务</li>
          <li>常见问题</li>
        </ul>
        <div class="product-content" v-html="detail.goodsDetailContent || ''"></div>
      </div>
    </div>
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" />
      <van-action-bar-icon 
        icon="cart-o" 
        :badge="!cartStore.count ? '' : cartStore.count" 
        text="购物车"
        @click="$router.push({path: '/shopcart'})"
      />
      <van-action-bar-button @click="handleAddCart" type="warning" text="加入购物车" />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
  </div>
</template>

<script setup>
import {ref, onMounted, nextTick, defineAsyncComponent} from 'vue'
import {useRoute} from 'vue-router'
import {Toast} from 'vant'
import {getDetail} from '@/service/shop'
import {imgPrefix} from '@/filter/prefix'
import useShopcart from '@/hooks/useShopcart'
import useCartStore from '@/store/shopcart'

const Swiper = defineAsyncComponent(() => import('@/components/Swiper'))

const detail = ref({})
const route = useRoute()
const cartStore = useCartStore()
const {addShopcart} = useShopcart()

onMounted(async () => {
  Toast.loading({
    message: '加载中...',
    forbidClick: true
  })
  const {data, resultCode} = await getDetail(route.params.id)
  if (resultCode !== 200) return
  await nextTick()
  data.goodsCarouselList = data.goodsCarouselList.map(i => imgPrefix(i))
  detail.value = data
  Toast.clear()
})

// 暂时不对添加购物车做防抖处理
function handleAddCart() {
  addShopcart({goodsCount: 1, goodsId: detail.value.goodsId})
}
</script>

<style lang="less" scoped>
@import '@/assets/style/mixin.less';

.shop-detail-container {
  .content {
    height: calc(100vh - 50px);
    overflow: hidden;
    overflow-y: auto;
    .swiper-wrapper {
      .my-swipe .van-swipe-item {
        img {
          width: 100%;
        }
      }
    }
    .product-info {
      padding: 0 10px;
      .product-title {
        font-size: 18px;
        text-align: left;
        color: #333;
      }
      .product-desc {
        font-size: 14px;
        text-align: left;
        color: #999;
        padding: 5px 0;
      }
      .product-price {
        .fj();
        span:nth-child(1) {
          color: #F63515;
          font-size: 22px;
        }
        span:nth-child(2) {
          color: #999;
          font-size: 16px;
        }
      }
    }
    .product-intro {
      width: 100%;
      padding-bottom: 50px;
      ul {
        .fj();
        width: 100%;
        margin: 10px 0;
        li {
          flex: 1;
          padding: 5px 0;
          text-align: center;
          font-size: 15px;
          border-right: 1px solid #999;
          box-sizing: border-box;
          &:last-child {
            border-right: none;
          }
        }
      }
      .product-content {
        padding: 0 20px;
        img {
          width: 100%;
        }
      }
    }
  }
}
</style>